{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dcCd3C5aLBLROzhFEj1bigWVnreynV9l"></script>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    <title>点聚合</title>
</head>
<body>
<div style="position: absolute;z-index: 999;margin: 10px 20px 0 360px">
    <input type="text" id="search" style="width: 520px;height: 25px">
<button id="huoqu" style="height: 30px;width: 80px">获取数据</button>
</div>

<div id="allmap"></div>

</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);
    map.enableScrollWheelZoom();


    var markers = [];
    //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers});
    var opts = {
        width: 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title: "信息窗口", // 信息窗口标题
    };
    $('#huoqu').click(function () {
        $.ajax({
            url: "{% url 'es' %}",
            type: "GET",
            data: {"search": $("#search").val()},
            success: function (res) {
                data = res['data'];
                console.log("len", data.length)

                markerClusterer.clearMarkers()
                markers = []

                var data_len = data.length
                if (data.length > 300) {
                    data_len = 300
                }
                for (var i = 0; i < data_len; i++) {
                    var marker = new BMap.Marker(new BMap.Point(data[i][0], data[i][1]));
                    markers.push(marker);
                    {#var content = data[i][2]#}
                    {#map.addOverlay(marker);#}
                    {#addClickHandler(content, marker);#}
                }
                markerClusterer.addMarkers(markers)
                setTimeout(function () {
                    map.setZoom(10);
                }, 500);
            }
        })
    });

    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(content, e)
            }
        );
    }

    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }


</script>